<template>
  <div id="drawer-target">
    <n-card>
      <!-- 搜索 -->
      <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />

      <!-- 表格 -->
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        striped
        :pagination-setting="pagination"
      />
    </n-card>
  </div>
  <!-- 详情 - 抽屉 -->
  <n-drawer v-model:show="showDraw" :width="'calc(100% - 2px)'" :placement="'right'" resizabl to="#drawer-target">
    <n-drawer-content title="报告详情" closable>
      <draw-comp :detail="detail" :type="modalType" @close="showDraw = false;handleSearch()" />
    </n-drawer-content>
  </n-drawer>

</template>

<script>
import { toRefs, reactive, unref, onUnmounted } from 'vue'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import DrawComp from './components/DrawComp.vue'
import table from './tools/table'
import { search, getAirInfo } from './tools/search'
import pagination from './tools/pagination'
import { getReportList } from '@/api/report/index'
import { TASK_TYPE } from '@/utils/dictionary'
import { arrToObj } from '@/utils/handleData'

export default {
  name: 'ReportList',
  components: { HeadSearch, DataTable, DrawComp },
  setup() {
    getAirInfo()

    const data = reactive({
      ...toRefs(table),
      ...toRefs(search)
    })

    // 请求接口
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res,
        status: 15
      }

      const temp = await getReportList(_params)
      // 拼接
      temp.data.records = temp.data.records.map(it => ({
        ...it,
        questionNum: `${it.problemHandleCount || 0}/${it.problemTotalCount || 0}`,
        statusName: arrToObj(TASK_TYPE, 'value', 'label')[it.type]
      }))
      return temp
    }

    // 新增
    function handleModal() {
      data.rowData = null
      data.modalType = 'create'
      data.modalShow = true
    }

    onUnmounted(() => {
      data.searchParams = null
    })

    return {
      ...toRefs(data),
      handleModal,
      loadDataTable,
      pagination
    }
  }
}
</script>

<style>
.drawer-target {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  /* margin-top: 10px; */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
</style>
